<template>
    <div class="banner">
        <swiper :autoplay="true" :loop="true" class="swiper">
            <swiper-slide v-for="(img, index) in images" :key="index">
                <img :src="img" alt="轮播图" class="slide-img" />
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper-bundle.css';

export default {
    name: "AppBanner",
    components: { Swiper, SwiperSlide },
    data() {
        return {
            images: [
                require('@/assets/banner1.jpg'),
                require('@/assets/banner2.jpg'),
            ]
        };
    }
}
</script>

<style scoped>
.banner {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

.slide-img {
    width: 100%;
    /* 图片宽度占满容器 */
    height: 300px;
    /* 图片高度固定 */
    object-fit: contain;
    /* 图片等比缩放，完整显示在容器内 */
    border-radius: 10px;
    /* 圆角边框 */
}
</style>
